<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>综合练习1</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>综合练习1</h1>

    <label>
      <input type="checkbox" v-model="isMember"/>
      是否会员
    </label>
    <br/>

    <select v-if="isMember" v-model="level">
      <option disabled value="">请选择会员等级</option>
      <option value="白银">白银会员</option>
      <option value="黄金">黄金会员</option>
      <option value="钻石">钻石会员</option>
    </select>
    <br/>

    <p>{{ welcomeText }}</p>

    数量：<input type="text" v-model.number="quantity"><br/>
    单价：<input type="text" v-model.number="price"><br/>

    <div v-if="ready">
      <p v-if="isMember">折扣：{{ discount }}</p>
      <p>总价：{{ total }}</p>
    </div>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          isMember: false,
          level: '',
          quantity: '',
          price: ''
        };
      },
      computed: {
        ready() {
          return this.quantity !== '' && this.price !== '';
        },
        discount() {
          if (!this.isMember || !this.level) return 1;
          const map = { 白银: 0.9, 黄金: 0.8, 钻石: 0.5 };
          return map[this.level];
        },
        total() {
          return (this.quantity * this.price * this.discount).toFixed(2);
        },
        welcomeText() {
          if (!this.isMember) return '亲爱的顾客，欢迎您！';
          if (!this.level) return '请选择会员等级';
          return `尊贵的${this.level}会员，欢迎您！`;
        }
      }
    }).mount('#app');
  </script>
</body>
</html>